<template>
  <view class="doctor-info-page">
    <view class="header">
      <view class="container">
        <!--        <image class="avatar" src="static/logo200.png" alt="用户头像"></image>-->
        <image class="avatar" :src="doctor.profilePic" mode="aspectFill"></image>
        <text class="follow-button" v-if="doctor.status ===3"  :style="{ marginRight: '30px' }" style="color: rebeccapurple" @click="gz(doctor)">关注</text>
        <text class="follow-buttonss" v-if="doctor.status ===4"  :style="{ marginRight: '30px' }" style="color: rebeccapurple" @click="gz(doctor)">√已关注</text>
      </view>


      <view class="info">
        <text class="name">{{ doctor.name }}</text>
        <view>
          <text class="title">{{ doctor.hospitalName }}</text>

        </view>
        <view class="doctor-hospital-info">
          <text class="doctor-hospital"  >{{ doctor.hospital }}</text>
          <text class="follow-buttons" v-if="doctor.hospitalLevel ===0"  :style="{ marginRight: '30px' }" style="color: rebeccapurple">三甲医院</text>
          <text class="follow-buttons" v-if="doctor.hospitalLevel ===1"  :style="{ marginRight: '30px' }" style="color: rebeccapurple">二甲医院</text>
          <text class="follow-buttons" v-if="doctor.hospitalLevel ===2"  :style="{ marginRight: '30px' }" style="color: rebeccapurple" >一甲医院</text>
          <text class="title" >{{ doctor.departmentsName }}</text>


        </view>
      </view>
    </view>
    <view class="heng">
      <view v-for="(label, index) in labels" :key="index" class="service-features">
        <text :class="getLabelClass(index)">{{ label }}</text>
      </view>
    </view>
    <view>
      <image src="/static/ys.png" mode="widthFix" />
    </view>
    <view class="details">
      <view class="detail-item">
        <text class="label">从业经验：</text>
        <text class="value">{{ doctor.age }}年</text>
      </view>
      <view class="detail-item">
        <text class="label">接诊量：</text>
        <text class="value">{{ doctor.visits }}万人次</text>
      </view>
      <view class="detail-item">
        <text class="label">好评率：</text>
        <text class="value">{{ doctor.star }}分</text>
      </view>
      <!-- 可以根据需要添加更多详情项 -->
    </view>
    <view>
      <view class="zcs">
        <scroll-view class="scroll-view" scroll-y="true">
          <view class="contain">
            <view class="titles">擅长与简介</view>
            <button @click="open"  class="popup spec"  :class="attrClass" @touchmove.stop.prevent="stopPrevent">查看全部</button>
            <uni-popup ref="popup" :mask-click="false"   >
              <text>Popup</text>
              <button @click="close">关闭</button>
            </uni-popup>

          </view>
          <text>{{ doctor.bio }}</text>
        </scroll-view>
      </view>
    </view>
    <view class="containerr">
      <text class="titles">患者评价</text>
      <view class="containyz">
        <image src="/static/doctor/pj.png" mode="widthFix" class="rights-image" @click="qb" />
      </view>
      <view class="evaluation">
        <view class="hengy">
          <view v-for="(label, index) in labelss" :key="index" class="service-featuress">
            <text :class="getLabelClass(index)">{{ label }}</text>
          </view>
        </view>
      </view>
    </view>

    <view class="container">
      <view class="doctor-list-wrapper">
        <view class="doctor-info" v-for="(doctor, index) in dataList" :key="index">
          <view class="doctor-name-container">
            <text class="doctor-name">{{ doctor.pmsTagName }}</text>
          </view>
          <br>
          <text class="doctor-content">{{ doctor.content }}</text> <!-- 注意这里将class改为doctor-content -->
          <text class="doctor-title">{{ doctor.createTime }}</text>
        </view>
      </view>
    </view>


    <view class="footer">
      <image
          src="/static/doctor/cy.png"
          mode="widthFix"
          class="right-image"
          @click="xx(doctor)"
          style="height: 60px; width: 60px; margin-left: 30px;"
      />
      <!-- 可以在这里添加按钮或其他操作元素 -->
      <button class="btn" @click="makeAppointment">图片咨询(￥{{doctor.money}}元/次)</button>
    </view>
  </view>

</template>

<script>
import {addPatientDiagnosisRecordOption, updatePatientDiagnosisRecordOption} from "@/api/websocket/websocket";
import {getInfo} from "@/api/login";
import {getCommentList, getDoctorById, updDoctor} from "@/api/doctor/doctor";

export default {
  data() {
    return {
      dataList:[],
      dockerId:0,

      doctor: {
        id:"",
        status:"",
        plabelName:'',
        diseaseName:'',
        pmsTagName:'',
      },
      stopPrevent() {},
      attrClass: 'none',
      patientDiagnosisRecordId: null,
      patientDiagnosisRecord: { //患者诊断记录
        id: null,
        patientId: null,
        birthDate: '',
        gender: '',
        doctorId: null,
        medicineId: null,
        inquiryId: null,
        createBy: null //问诊人
      },
      id: null,
      user: {}
    };
  },
  methods: {

    getUserInfo(){
      getInfo().then(res => {
        console.log(res.data)
        this.user = res.data.user
        this.id = res.data.user.userId
        console.log("用户编号"+this.id)
      })
    },
    makeAppointment(){
      uni.navigateTo({
        url: `/pages/shop/orders/createOrder?medicineId=`+this.doctor.id+`&orderType=2`,
      });
    },


    qb(){
      uni.navigateTo({
        url: `/pages/doctor/allin`
      })
    },

    //跳转送心意页面
    xx(item) {
      let id = item.id;
      uni.navigateTo({
        url: `/pages/doctor/intention?id=${id}`
      })
    },


    open() {
      this.$refs.popup.open('bottom')
    },
    close() {
      this.$refs.popup.close()
    },

    getLabelClass(index) {
      // 示例：根据索引返回不同的类名，实际应用中可能需要根据具体需求来调整逻辑
      const classes = [];
      return classes[index] || 'label-default'; // 默认类名，以防索引超出范围
    },

    gz(row){
      this.$nextTick(() => {
        // 在这里执行任何需要等待 DOM 更新的操作
        if (row.status==3){
          this.doctor.id=row.id,
              this.doctor.status=4
          updDoctor(this.doctor).then(response=>{
            if (response.code===200){
              this.$message.success(response.data);
              uni.reload()
            }else {
              this.$message.error(response.mgs);
            }
          })
        }
        if (row.status==4){
          this.doctor.id=row.id,
              this.doctor.status=3
          updDoctor(this.doctor).then(response=>{
            if (response.code===200){
              this.$message.success(response.data);
              uni.reload()
            }else {
              this.$message.error(response.mgs);
            }
          })
        }
        // 其他逻辑...
      });
    },





    async onLoad(options) {
      let id = options.id;
      this.doctor.id=options.id
      this.patientDiagnosisRecordId = options.patientDiagnosisRecordId
      this.getUserInfo()
      getDoctorById(id).then(res=>{
        this.doctor=res.data
      })
      this.patientDiagnosisRecord.id = this.patientDiagnosisRecordId //医生诊断记录主键
      this.patientDiagnosisRecord.doctorId = this.doctor.id //医生编号
      this.patientDiagnosisRecord.createBy = this.user.userId
      if (null != this.patientDiagnosisRecord.id){
        updatePatientDiagnosisRecordOption(this.patientDiagnosisRecord).then(res => {
          console.log(res)
        })
      }
      if (null == this.patientDiagnosisRecord.id){
        addPatientDiagnosisRecordOption(this.patientDiagnosisRecord).then(res => {
          console.log("添加医生诊断表成功")
        })
      }

      getCommentList(id).then(
          res=>{
            this.dataList = res.data
          }
      )


    },
  },
  computed: {
    // 计算属性，用于拆分数据并返回一个数组
    labels() {
      return this.doctor.plabelName.split(',');
    },
    // 计算属性，用于拆分数据并返回一个数组
    labelss() {
      return this.doctor.diseaseName.split(',');
    },
    // 计算属性，用于拆分数据并返回一个数组
    labelsss() {
      return this.doctor.diseaseName.split(',');
    }
  },
};
</script>

<style scoped>
.doctor-name-container {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  border-radius: 10px;
  background-color: #f0f8ff; /* 浅蓝色背景 */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* 轻微阴影 */
}

.doctor-name {
  font-size: 18px;
  font-weight: bold;
  color: #333; /* 深灰色字体 */
  margin: 0;
  padding: 0;
  text-align: center;
}

.container {
  padding: 20px;
  background-color: #ffffff; /* 背景色为白色 */
}

.doctor-list-wrapper {
  display: flex;
  flex-direction: column; /* 垂直布局 */
}

.doctor-info {
  display: flex;
  flex-direction: row; /* 水平布局 */
  align-items: center; /* 垂直居中 */
  padding: 10px 0; /* 上下内边距 */
  border-bottom: 1px solid #e0e0e0; /* 底部边框 */
}

.doctor-info:last-child {
  border-bottom: none; /* 最后一个元素没有底部边框 */
}

.doctor-name {
  flex: 1; /* 占据剩余空间 */
  padding-right: 10px; /* 右侧内边距，用于分隔 */
  overflow: hidden; /* 隐藏超出部分 */
  text-overflow: ellipsis; /* 超出部分显示省略号 */
//white-space: nowrap; /* 不换行 */
  font-size: 16px; /* 字体大小 */
  color: #333333; /* 字体颜色 */
}

/* 注意：这里有两个.doctor-name样式，你可能需要区分它们，比如改为.doctor-name和.doctor-content */
.doctor-content {
  flex: 2; /* 比.doctor-name占据更多空间 */
  font-size: 14px; /* 字体大小 */
  color: #666666; /* 字体颜色 */
}

.doctor-title {
  flex: 0 0 100px; /* 固定宽度 */
  text-align: right; /* 文本右对齐 */
  font-size: 15px; /* 字体大小 */
  color: red; /* 字体颜色为红色 */
  transform: translateY(-100%); /* 垂直居中调整 */
}



/* 图片样式 */
.rights-image {
  width: 80px;
  height: 80px;
  position: absolute; /* 使用绝对定位 */
  left: 280%; /* 距离右侧为0 */
  top: 50%; /* 垂直居中，这里使用 top: 50% 和 transform: translateY(-50%) */
  transform: translateY(-80%); /* 垂直居中调整 */
}
.containyz {
  position: relative; /* 或者使用其他布局方式，如 flex */
  width: 30%; /* 容器宽度 */
  height: 30%; /* 容器高度，或者根据需要设置 */
}
.containerr {
  padding: 20px;
}

.title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.evaluation {
  font-size: 16px;
  color: #333;
  line-height: 1.5;
}

.view-all-btn {
  display: block;
  width: 100%;
  padding: 10px;
  background-color: #007aff;
  color: #fff;
  text-align: center;
  border-radius: 5px;
  margin-top: 20px;
  text-decoration: none;
}


.heng {
  display: flex; /* 利用flex布局使子元素横向排列 */
}
.service-features {
  width: 70px;
  height: 25px;
  background-color: #3c96f3; /* 背景颜色，可根据需要调整 */
  color: white; /* 白色文字 */
  border: 1px solid #ccc;
  border-radius: 35px; /* 边框圆角，可根据需要调整 */
  font-size: 10px; /* 字体大小 */
  text-align: center; /* 文字居中 */
  line-height: 20px; /* 行高与高度一致，使文字垂直居中 */
}
.hengy {
  display: flex; /* 利用flex布局使子元素横向排列 */
}
.service-featuress {
  width: 70px;
  height: 25px;
  background-color:silver; /* 背景颜色，可根据需要调整 */
  color:black; /* 白色文字 */
  border: 1px solid #ccc;
  border-radius: 0px; /* 边框圆角，可根据需要调整 */
  font-size: 13px; /* 字体大小 */
  text-align: center; /* 文字居中 */
  line-height: 20px; /* 行高与高度一致，使文字垂直居中 */
  margin-right: 20px; /* 为右侧添加间距 */
}
.zcs {
  padding: 2px;
}

.spec {
  font-size: 26upx;
  color: $font-color-light;
}

.contain {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.titles {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  flex: 1;
  padding: 10px;
}

.titless {
  padding: 10px;
}

.scroll-view {
  height: 100px; /* 根据需要调整高度 */
  border: 1px solid #ddd;
  padding: 10px;
  background-color: #f9f9f9;
}



.item text {
  font-size: 16px;
  color: #333;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%; /* 圆形头像 */
  margin-bottom: 20px; /* 与关注按钮的间距 */
}

.follow-button {
  width: 100px;
  height: 40px;
  background-color: #4CAF50; /* 绿色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 100px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  text-align: center; /* 文字居中 */
  line-height: 40px; /* 行高与高度一致，使文字垂直居中 */
}
.follow-buttonss {
  width: 100px;
  height: 40px;
  background-color:silver; /* 绿色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 100px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  text-align: center; /* 文字居中 */
  line-height: 40px; /* 行高与高度一致，使文字垂直居中 */
}

.follow-buttons {
  width: 100px;
  height: 40px;
  background-color: coral; /* 绿色背景 */
  color: white; /* 白色文字 */
  border: none; /* 无边框 */
  border-radius: 100px; /* 圆角 */
  font-size: 16px; /* 字体大小 */
  text-align: center; /* 文字居中 */
  line-height: 40px; /* 行高与高度一致，使文字垂直居中 */
}

.header {
  display: flex;
  align-items: center;
  margin-bottom: 1px;
}

.avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin-right: 20px;
}

.info {
  flex: 1;
}

.name {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 10px;
}

.title, .hospital {
  font-size: 16px;
  color: #666;
}

.details {
  margin-bottom: 20px;
}

.detail-item {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.label {
  width: 80px;
  font-size: 16px;
  color: #333;
}

.value {
  flex: 1;
  font-size: 16px;
  color: #666;
}

.footer {
  display: flex;
  justify-content: center;
  padding: 10px 0;
  background-color: #f5f5f5;
  margin-top: auto; /* 使按钮紧贴页面底部 */
}

.btn {
  width: 200px;
  height: 40px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  line-height: 40px;
  border-radius: 5px;
  margin-top: auto; /* 使按钮紧贴页面底部 */
}
</style>
